<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <include file="Public:resource"/>
    <title>代缴纳水费清单</title>
</head>
<body style="margin-bottom: 50px;">
<div class="container">
    <include file="Public:top" title="水费清单"/>

    <if condition="json.retcode neq 0">
        <!--获取数据失败-->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 c-red" style="font-size: large;" align="center">
                {$json.errmsg}
            </div>
        </div>
        <else/>
        <!--获取数据成功-->
        <empty name="json.data.list">
            <!--是空列表-->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 c-gray" style="margin-top: 50px;font-size: large"
                     align="center">
                    用户"{$json.userid}"没有未支付水费
                </div>
            </div>
            <else/>
            <!--非空，遍历-->
            <foreach name="json.data.list" item="order">
                <div class="row" style="padding: 10px 0px 10px 0px;border-bottom: darkgray solid 1px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                水费账号
                            </div>
                            <!--<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray" id="userid">
                                {$json.userid}
                            </div> -->
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                <span id="userid">{$json.userid}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                账单月份
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                {$order.month}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                抄表时间
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                {$order.billtime}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                上期表数
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                {$order.upqty}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                本期表数
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                {$order.curqty}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                本期用水
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                {$order.useqty} 吨
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                水费单价
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                <span class="c-red">￥
                                    <script>
                                        document.write(FenToYuan('{$order.price}'));
                                    </script>
                                    元
                                </span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                滞纳金
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                <span class="c-red">￥
                                    <script>
                                        document.write(FenToYuan('{$order.latefee}'));
                                    </script>
                                    元
                                </span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                其它费用
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                <span class="c-red">￥
                                    <script>
                                        document.write(FenToYuan('{$order.otherfee}'));
                                    </script>
                                    元
                                </span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
                                账单金额
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 c-gray">
                                <span class="c-red">￥
                                    <script>
                                        document.write(FenToYuan('{$order.billamount}'));
                                    </script>
                                    元
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </foreach>
            <!--支付行-->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <nav class="navbar navbar-default navbar-fixed-bottom clearfix">
                        <div class="container" id="bottom-bar">
                            <div class="row" id="menu-row">
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center"
                                     style="font-size: large;padding-top: 10px;">
                                    总额:
                                    <span class="c-red">￥{$json.totalFeeInYuan}</span>
                                    <input type="text" value="{$json.totalFeeInYuan}" id="totalFeeInYuan" hidden>
                                    <input type="text" value="{$json.totalFeeInFen}" id="totalFeeInFen" hidden>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 m-bn" style="border-radius: 0px;"
                                     align="center"
                                     onclick="onPay()">
                                    微信支付
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>

        </empty>
    </if>
</div>
<include file="Public:progress" hint="请等待..."/>
<script>
    //点击微信支付
    function onPay() {
        var totalFee = $("#totalFeeInFen").val();
        var userid = $("#userid").text();
        var param = {
            totalFee:totalFee,
            userid:userid
        }
        $.ajax({
            type:'post',
            dataType:'json',
            data:param,
            async:false,
            url:"{:U('Pay/placeOrderInWeiXin')}",
            contentType:"application/x-www-form-urlencoded;charset=utf-8",
            success:function(json){
                if(json.status == 'success'){
                    pay(json);
                }else{
                    alert(json.msg);
                    window.location.reload();
                }
            },
            error:function(msg){
                alert("微信下单失败,请检查网络!");
            }
        });
    }


    function onBridgeReady(json) {
        //alert(JSON.stringify(json.orderInfo));
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest',json.jsApiParameters,
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        //todo 支付成功后,调用Recharge接口进行账单缴费
                        showProgress();
                        ReCharge(
                                json.orderInfo.userId,
                                json.orderInfo.userAtr,
                                json.orderInfo.tradeNo,
                                json.orderInfo.way,
                                json.orderInfo.payType,
                                json.orderInfo.payTime,
                                json.orderInfo.amount
                        );
                    }
                }
        );
    }
    /**
     * 支付方法
     */
    function pay(json) {
        if (typeof WeixinJSBridge == "undefined") {
            alert("请使用微信浏览器支付");
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady(json);
        }
    }
    //调用Recharge接口进行账单缴费
    function ReCharge(userId,userAtr,tradeNo,way,payType,payTime,amount){
        var param = {
            userId:userId,
            userAtr:userAtr,
            tradeNo:tradeNo,
            way:way,
            payType:payType,
            payTime:payTime,
            amount:amount
        }
        $.ajax({
            type:'post',
            dataType:'json',
            data:param,
            async:false,
            url:"{:U('Pay/Recharge')}",
            contentType:"application/x-www-form-urlencoded;charset=utf-8",
            success:function(json){
                if(json.status == "success"){
                    successParam = param;
					//alert(JSON.stringify(json));
                    window.location.href="{:U('Pay/success')}&param=" + JSON.stringify(successParam);
					
                }
            },
            error:function(msg){

            }
        })

    }
</script>

</body>
</html>